<template>
  <view class="bg-white">
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content">退宿申请新增</block>
    </cu-custom>
    <view style="padding: 15px">
      <form>
        <view>
          <image
            style="width: 100rpx; height: 100rpx"
            :src="dataObj.avatar"
          ></image>
        </view>
        <view class="cu-form-group">
          <view class="title">姓名</view>
          <my-seach-select
            range-key="realname"
            value-key="id"
            v-model="userId"
            search-url="/sys/user/list"
            :default-params="{
              column: 'createTime',
              order: 'desc',
              isStay: 1,
              pageSize: -1,
              jobStatus: '1,2',
              company: Auth_Company_Id,
            }"
            @changeItem="changeItemRealName"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">工号</view>
          <input
            disabled
            v-model="dataObj.workNo"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">公司</view>
          <input
            disabled
            v-model="dataObj.company_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <radio-group class="block" v-model="dataObj.sex_dictText">
          <view class="cu-form-group" style="position: relative">
            <view class="title">性别</view>
            <view style="position: absolute; left: 55px">
              <radio
                value="男"
                :checked="dataObj.sex === 1"
                style="margin-left: 25px"
              >
                <text style="margin-left: 10px; z-index: 9">男</text>
              </radio>
              <radio
                value="女"
                :checked="dataObj.sex === 2"
                style="margin-left: 15px"
              >
                <text style="margin-left: 10px; z-index: 9">女</text>
              </radio>
            </view>
          </view>
        </radio-group>
        <view
          class="cu-form-group"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">年龄</view>
          <input
            disabled
            v-model="dataObj.age"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">进厂时间</view>
          <input
            disabled
            v-model="dataObj.enterFactoryTime"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">部门</view>
          <input
            disabled
            v-model="dataObj.orgCodeTxt"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">岗位</view>
          <input
            disabled
            v-model="dataObj.post"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">宿舍属性</view>
          <input
            disabled
            v-model="dataObj.roomType_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">楼栋</view>
          <input
            disabled
            v-model="dataObj.buildingId_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">楼层</view>
          <input
            disabled
            v-model="dataObj.floorId_dictText"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view
          class="cu-form-group margin-top"
          style="background-color: #f4f4f4; border-radius: 15px"
        >
          <view class="title">宿舍号</view>
          <input
            disabled
            v-model="dataObj.roomCode"
            placeholder="请输入"
            name="input"
            style="margin-left: 20px"
          />
        </view>
        <view class="cu-form-group margin-top">
          <view class="title">退房日期</view>
          <picker mode="date" :value="refundTime" @change="DateChange">
            <view style="text-align: right">
              {{ refundTime ? refundTime : "请选择" }}
            </view>
          </picker>
        </view>
      </form>

      <view style="margin-top: 20px">
        <view class="action" style="margin-bottom: 5px">
          <text class="cuIcon-titles" style="color: #1e5eff"></text>
          <text style="color: #131314; font-size: 25rpx; font-weight: bold">
            物品交接
          </text>
          <text
            @click="goodsListBtn"
            style="
              float: right;
              padding: 8rpx 20rpx;
              background-color: rgba(69, 145, 254, 1);
              border-radius: 10rpx;
              color: #ffffff;
            "
          >
            新增
          </text>
        </view>
        <view
          style="padding: 10px"
          v-for="(item, index) in goodsList"
          :key="index"
        >
          <view
            style="
              padding: 15rpx 30rpx;
              background-color: rgba(237, 233, 233, 1);
              border-radius: 10px 10px 0px 0px;
              text-align: right;
            "
          >
            <text
              @click="deleteGoodsList(index)"
              class="cuIcon-delete"
              style="color: #ff3b3b"
            ></text>
          </view>
          <view class="cu-form-group" style="background: #fafafa">
            <view class="title">品名</view>
            <input name="input" v-model="item.name" />
          </view>
          <view class="cu-form-group" style="background: #fafafa">
            <view class="title">规格</view>
            <input name="input" v-model="item.specs" />
          </view>
          <view class="cu-form-group" style="background: #fafafa">
            <view class="title">单位</view>
            <input name="input" v-model="item.unit" />
          </view>
          <view class="cu-form-group" style="background: #fafafa">
            <view class="title">数量</view>
            <input name="input" v-model="item.num" />
          </view>
          <view class="cu-form-group" style="background: #fafafa">
            <view class="title">备注</view>
            <input name="input" v-model="item.remark" />
          </view>
        </view>
      </view>

      <view style="margin-top: 20px">
        <view class="action" style="margin-bottom: 5px">
          <text class="cuIcon-titles" style="color: #1e5eff"></text>
          <text style="color: #131314; font-size: 25rpx; font-weight: bold">
            退宿附件
          </text>
          <text
            @click="chooseImageUpload"
            style="
              float: right;
              padding: 8rpx 20rpx;
              background-color: rgba(69, 145, 254, 1);
              border-radius: 10rpx;
              color: #ffffff;
            "
          >
            上传
          </text>
        </view>
        <view
          v-for="(item, index) in annexList"
          :key="index"
          class="upload-item"
        >
          <view
            class="upload-item-label"
            @click="downloadClick(item.filePlace)"
            >{{ item.filePlace.split("/").pop() }}</view
          >
          <text
            @click="deleteAnnexByIndex(index)"
            class="cuIcon-delete"
            style="color: #ff3b3b"
          ></text>
        </view>
      </view>

      <view
        style="
          display: flex;
          margin-top: 15px;
          justify-content: space-between;
          align-items: center;
        "
      >
        <view
          @click="submit"
          style="
            padding: 30rpx 110rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;
            background-color: rgba(30, 94, 255, 1);
            border-radius: 30rpx;
            color: #ffffff;
          "
        >
          提交审核
        </view>
        <view
          @click="save"
          style="
            padding: 30rpx 110rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;
            border-radius: 30rpx;
            background-color: rgba(255, 173, 4, 1);
            color: #ffffff;
          "
        >
          保存
        </view>
      </view>

      <uni-popup ref="submitFlag" background-color="#fff" :mask-click="false">
        <view
          style="
            text-align: center;
            background-color: #ffffff;
            padding: 11rpx;
            width: 580rpx;
            height: 470rpx;
            border-radius: 42rpx;
          "
        >
          <view>
            <view class="submit-item">
              <image class="submit-icon" src="@/static/duihaoblue.png" />
            </view>
            <view style="margin-top: 28rpx">
              <text class="submit-text">住宿申请已经提交</text>
            </view>
            <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx">
              <text>已提醒审核人员进行审核</text>
            </view>
            <button
              @click="sureOne"
              style="
                border-radius: 20rpx;
                background-color: rgba(69, 145, 254, 1);
                color: rgba(255, 255, 255, 1);
                width: 300rpx;
                margin-top: 27rpx;
              "
            >
              确定
            </button>
          </view>
        </view>
      </uni-popup>
      <uni-popup ref="draftsFlag" background-color="#fff" :mask-click="false">
        <view>
          <view
            style="
              text-align: center;
              background-color: #ffffff;
              padding: 11rpx;
              width: 580rpx;
              height: 470rpx;
              border-radius: 42rpx;
            "
          >
            <view class="submit-item">
              <image class="submit-icon" src="@/static/drafts.png" />
            </view>
            <view style="margin-top: 28rpx">
              <text class="submit-text">已保存进草稿箱</text>
            </view>
            <view style="color: rgba(150, 150, 150, 1); margin-top: 23rpx">
              <text>您可以进入草稿箱查看</text>
            </view>
            <button
              @click="sureThree"
              style="
                border-radius: 20rpx;
                background-color: rgba(69, 145, 254, 1);
                color: rgba(255, 255, 255, 1);
                width: 300rpx;
                margin-top: 27rpx;
              "
            >
              确定
            </button>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import configService from "@/common/service/config.service.js";

export default {
  data() {
    return {
      id: Math.floor(Math.random() * 10000000000000000000) + Date.now(),
      userId: "",
      dataObj: {
        enterFactoryTime: "",
      },
      buildingId: "",
      floorId: "",
      roomCode: "",
      roomType: "",
      goodsList: [
        {
          id: Math.floor(Math.random() * 10000000000000000000) + Date.now(),
          name: "",
          num: "",
          remark: "",
          specs: "",
          unit: "",
        },
      ],
      annexList: [],
      Auth_Company_Id: "",
      refundTime: "",
    };
  },
  mounted() {
    this.Auth_Company_Id = uni.getStorageSync("Auth_Company_Id");
  },
  watch: {
    userId: {
      immediate: true,
      handler(val, old) {
        // this.userId = val;
        if (this.userId !== "") {
          // this.queryUserByUserId()
        }
      },
    },
  },
  methods: {
    getFileAccessHttpUrl(avatar, subStr) {
      if (!subStr) subStr = "http";
      if (avatar && avatar.startsWith(subStr)) {
        return avatar;
      } else {
        return configService.staticDomainURL + "/" + avatar;
      }
    },
    changeItemRealName(item) {
      this.dataObj = {
        ...item,
        enterFactoryTime: item?.enterFactoryTime
          ? item?.enterFactoryTime?.replace(/-/g, "/")
          : "",
      };
    },
    submit() {
      this.$http
        .post(
          "/crm_dormitory_refund_application/crmDormitoryRefundApplication/add",
          {
            approvalStatus: 1,
            handovers: this.goodsList,
            id: this.id,
            userId: this.userId,
            annexList: this.annexList,
            realname: this.dataObj.realname,
            company: this.dataObj.company,
            buildingId: this.dataObj.buildingId,
            floorId: this.dataObj.floorId,
            workNo: this.dataObj.workNo,
            company_dictText: this.dataObj.company_dictText,
            sex: this.dataObj.sex,
            age: this.dataObj.age,
            enterFactoryTime: this.dataObj.enterFactoryTime
              ? this.dataObj.enterFactoryTime?.replace(/\//g, "-")
              : "",
            departIds: this.dataObj.departIds,
            post: this.dataObj.post,
            buildingId_dictText: this.dataObj.buildingId_dictText,
            floorId_dictText: this.dataObj.floorId_dictText,
            roomCode: this.dataObj.roomCode,
            roomType: this.dataObj.roomType,
            refundTime: this.refundTime,
          }
        )
        .then((res) => {
          if (res.data.success) {
            setTimeout(() => {
              this.$http
                .post(
                  "/crm_dormitory_refund_application/crmDormitoryRefundApplication/submitTrial/" +
                    this.id
                )
                .then((res) => {
                  if (res.data.success) {
                    this.$refs.submitFlag.open("center");
                  } else {
                    this.$tip.toast("提交审核失败");
                  }
                })
                .catch(() => {
                  this.$tip.loaded();
                  this.$tip.toast("提交审核失败");
                });
            }, 100);
          } else {
            this.$tip.toast(res.data.message);
          }
        })
        .catch(() => {
          this.$tip.loaded();
          this.$tip.toast("提交失败");
        });
    },
    sureOne() {
      this.$refs.submitFlag.close();
      uni.redirectTo({
        url: "/pages/retreatApplication/index",
      });
    },
    save() {
      this.$http
        .post(
          "/crm_dormitory_refund_application/crmDormitoryRefundApplication/add",
          {
            approvalStatus: 1,
            handovers: this.goodsList,
            id: this.id,
            userId: this.userId,
            annexList: this.annexList,
            realname: this.dataObj.realname,
            company: this.dataObj.company,
            buildingId: this.dataObj.buildingId,
            floorId: this.dataObj.floorId,
            workNo: this.dataObj.workNo,
            company_dictText: this.dataObj.company_dictText,
            sex: this.dataObj.sex,
            age: this.dataObj.age,
            enterFactoryTime: this.dataObj.enterFactoryTime
              ? this.dataObj.enterFactoryTime?.replace(/\//g, "-")
              : "",
            departIds: this.dataObj.departIds,
            post: this.dataObj.post,
            buildingId_dictText: this.dataObj.buildingId_dictText,
            floorId_dictText: this.dataObj.floorId_dictText,
            roomCode: this.dataObj.roomCode,
            roomType: this.dataObj.roomType,
            refundTime: this.refundTime,
          }
        )
        .then((res) => {
          if (res.data.success) {
            this.$refs.draftsFlag.open("center");
          } else {
            this.$tip.toast(res.data.message);
          }
        })
        .catch(() => {
          this.$tip.loaded();
          this.$tip.toast("提交失败");
        });
    },
    sureThree() {
      this.$refs.draftsFlag.close();
      uni.redirectTo({
        url: "/pages/retreatApplication/retreatApplicationDrafts/index",
      });
    },
    //其他事项
    goodsListBtn() {
      this.goodsList.push({
        id: Math.floor(Math.random() * 10000000000000000000) + Date.now(),
        name: "",
        num: "",
        remark: "",
        specs: "",
        unit: "",
      });
    },
    deleteGoodsList(index) {
      this.goodsList.splice(index, 1);
    },
    chooseImageUpload() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const file = res?.tempFilePaths?.[0];
          if (file) {
            this.$http
              .upload(this.$config.apiUrl + "/sys/common/upload", {
                filePath: file,
                name: "file",
              })
              .then((res) => {
                this.annexList.push({
                  filePlace: res.data.message,
                  applicationId: this.id,
                });
              })
              .catch((err) => {
                this.$tip.error(err.data.message);
              });
          }
        },
      });
    },
    deleteAnnexByIndex(index) {
      this.annexList.splice(index, 1);
    },
    downloadClick(file) {
      uni.downloadFile({
        url: this.getFileAccessHttpUrl(file),
        success: (res) => {
          if (res.statusCode === 200) {
            this.$tip.toast(`下载成功${res?.tempFilePath || ""}`);
          }
        },
      });
    },
    DateChange(e) {
      this.refundTime = e.detail.value;
    },
  },
};
</script>

<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
}

.blackList {
  height: 100%;
  overflow: hidden;
}

.page-search {
  padding-left: 34rpx;
  margin-bottom: 12rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 680rpx;
  height: 86rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;

  .search-left {
    width: 28rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-center {
    margin-left: 22rpx;
  }

  .search-placeholder {
    font-size: 28rpx;
    font-weight: 400;
    color: #7c7c7c;
  }
}

.filter-btn {
  width: 40rpx;
  height: 40rpx;
  margin-right: 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-content-main {
  height: calc(100% - 12rpx - 86rpx);
  border-top-left-radius: 64rpx;
  border-top-right-radius: 64rpx;
  padding: 26rpx 34rpx 0 34rpx;
}

.select-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.select {
  width: 160rpx;
  height: 74rpx;
  border-radius: 60rpx;
  background-color: #4591fe;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 48rpx;
  position: relative;

  .select-value {
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    margin-right: 18rpx;
  }

  .select-icon {
    width: 22rpx;
    height: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20rpx;
    top: 25rpx;
  }
}

.list {
  height: calc(100% - 74rpx - 20rpx);
}

.list-item {
  border-radius: 28rpx;
  background-color: #ffffff;
  padding: 26rpx 24rpx 28rpx 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 26rpx;
  position: relative;

  .list-item-leftCenter {
    display: flex;
    flex-direction: row;
  }

  .list-item-left {
    width: 86rpx;
    height: 86rpx;
    margin-right: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-center {
    .list-item-row {
      display: flex;
      flex-direction: row;
      margin-bottom: 20rpx;

      .list-item-name {
        color: #101317;
        font-size: 32rpx;
        margin-right: 16rpx;
      }

      .list-item-sex {
        width: 106rpx;
        height: 42rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-bottom-left-radius: 20rpx;
        background-color: rgba(234, 171, 78, 0.35);
        line-height: 42rpx;
        text-align: center;
        color: rgba(255, 173, 4, 1);
        font-size: 24rpx;
      }

      .list-item-row-icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .list-item-row-title,
      .list-item-row-value {
        font-size: 24rpx;
        font-weight: 400;
        color: #101317;
        line-height: 38rpx;
      }
    }
  }

  .list-item-btn {
    width: 36rpx;
    height: 36rpx;
    margin-top: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-tab {
    width: 132rpx;
    height: 56rpx;
    text-align: center;
    line-height: 56rpx;
    background-color: rgba(69, 145, 254, 0.4);
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 26rpx;
    border-bottom-left-radius: 20rpx;
  }

  .list-item-tab-text {
    font-size: 26rpx;
    color: rgba(69, 145, 254, 1);
  }
}

.nav-right-image {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15px;
}

.cu-form-group {
  background-color: transparent;
}

::v-deep {
  .cu-form-group uni-picker .picker {
    color: #ffffff;
  }

  .cu-form-group uni-picker::after {
    opacity: 0;
  }
}

.textView {
  margin-left: 25px;
  font-size: 10px;
  margin-top: 5px;
}

.listText {
  width: 148rpx;
  height: 24rpx;
  font-size: 20rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 24rpx;
}

/deep/ .uni-radio-input {
  width: 10px;
  height: 10px;
}

.submit-icon {
  width: 118rpx;
  height: 118rpx;
  margin-top: 58rpx;
}
.upload-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 8px 10px;
  background: #fafafa;
  margin-bottom: 10px;
  width: 100%;

  .upload-item-label {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    color: #1e5eff;
  }
}
</style>
